<template>
  <view class="root">
    <view class="root-inner">
      <view class="c-item" @click="handleInspectionTack">
        <div class="i-top">
          <view class="i-left">
            <image class="c-icon" :src="$baseImgUrl + 'check-3-icon.png'" mode=""></image>
            检查任务
          </view>
          <u-icon name="arrow-right" color="#C7C7C7" size="22"></u-icon>
        </div>
        <view class="i-bottom">
          <view class="i-bottom-inner">
            <view class="b-top b-item">
              <view class="b-label">待办任务:</view>
              <view class="b-value">{{detail.jincompleteCount + detail.jexpectCount}}</view>
              <view class="b-result">
                {{`已逾期任务${detail.jexpectCount}项`}}
              </view>
            </view>
            <view class="b-item">
              <view class="b-label">已办任务:</view>
              <view class="b-value">{{detail.jcompleteCount}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="c-item" @click="handleRecheckTask">
        <div class="i-top">
          <view class="i-left">
            <image class="c-icon" :src="$baseImgUrl + 'c-task.png'" mode=""></image>
            复查任务
          </view>
          <u-icon name="arrow-right" color="#C7C7C7" size="22"></u-icon>
        </div>
        <view class="i-bottom">
          <view class="i-bottom-inner">
            <view class="b-top b-item">
              <view class="b-label">待办任务:</view>
              <view class="b-value">{{detail.dincompleteCount + detail.dexpectCount}}</view>
              <view class="b-result">
                {{`已逾期任务${detail.dexpectCount}项`}}
              </view>
            </view>
            <view class="b-item">
              <view class="b-label">已办任务:</view>
              <view class="b-value">{{detail.dcompleteCount}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    taskVerificationCount
  } from '../api/api'
  import {
    isLoading,
    navTo
  } from '../utils/util'
  export default {
    data() {
      return {
        $baseImgUrl: this.$baseImgUrl,
        detail: {}
      }
    },
    onShow() {
      this.initData()
    },
    methods: {
      handleRecheckTask() {
        navTo({
          url: '/venueInspection/recheckTask'
        })
      },
      initData() {
        isLoading(true)
        taskVerificationCount()
          .then((res) => {
            this.detail = res.result
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleInspectionTack() {
        navTo({
          url: '/venueInspection/inspectionTask'
        })
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background: #F9F9F9;
  }
</style>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    padding: 13rpx 16rpx;

    .root-inner {
      width: 100%;
      height: 100%;

      .c-item {
        background: #fff;
        margin-bottom: 16rpx;

        .i-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 113rpx;
          padding-left: 55rpx;
          padding-right: 43rpx;

          .i-left {
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 32rpx;
            color: #3A3A3A;

            .c-icon {
              width: 54.42rpx;
              height: 52.17rpx;
              margin-right: 15rpx;
            }
          }
        }

        .i-bottom {
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          padding: 25rpx 34rpx;

          .i-bottom-inner {
            background: #F8F8F8;
            padding: 25rpx 34rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;

            .b-top {
              margin-bottom: 20rpx;
            }

            .b-item {
              display: flex;
              align-items: center;

              .b-label {
                font-weight: 500;
                font-size: 26rpx;
                color: #909399;
              }

              .b-value {
                font-weight: 500;
                font-size: 26rpx;
                color: #3A3A3A;
                margin-left: 15rpx;
              }

              .b-result {
                background: #FFDBD9;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                padding: 2rpx 10rpx;
                font-weight: 400;
                font-size: 22rpx;
                color: #E43D33;
                margin-left: 40rpx;
              }
            }
          }
        }
      }
    }
  }
</style>